<template>
  <div class="invite-2-join">
    <div v-if="!successful" class="content-main invite-form">
      <div class="content-goal">
        <p>所属班级</p>
        <p class="mt-12">{{ targetName || '-' }}</p>
      </div>
      <div class="form-wrap">
        <a-form ref="formRef" :model="formState" layout="vertical" autocomplete="off" :rules="rules" @finish="submit">
          <a-form-item label="学生姓名" name="username">
            <a-input v-model:value="formState.username" v-trim :maxlength="50" placeholder="请输入学生姓名" />
          </a-form-item>
          <a-form-item class="flex-1" label="学号" name="number">
            <a-input v-model:value="formState.number" v-trim :maxlength="20" placeholder="请输入学号" />
          </a-form-item>
          <a-form-item class="flex-1" label="手机号码" name="tel">
            <a-input v-model:value="formState.tel" v-trim :maxlength="11" class="bottom-input" placeholder="请输入手机号码" />
          </a-form-item>

          <div class="btn-wrap">
            <a-button class="w-199" size="large" type="primary" html-type="submit" :loading="confirmLoading"> 提交 </a-button>
          </div>
        </a-form>
      </div>
    </div>

    <div v-else class="content-main status-success">
      <i class="iconfont icon-checkbox-circle-fill"></i>
      <p v-if="needCheck">
        申请提交成功
        <br />
        请耐心等待审核
      </p>
      <p v-else>
        信息录入成功
        <br />
        可前往PC端登陆
      </p>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { useForm } from '../hooks/use-form'

  const { successful, needCheck, targetName, formRef, formState, rules, submit, confirmLoading } = useForm()
</script>
<style lang="less" scoped>
  .invite-2-join {
    width: 100%;
    min-width: 200px;
    height: 100%;
    background: #fff;

    .content-main {
      width: 100%;

      &.invite-form {
        padding: 16px 0 20px;

        .content-goal {
          align-items: center;
          padding: 14px 20px;
          font-size: 14px;
          color: rgba(21, 23, 27, 0.95);
          background: rgba(0, 0, 0, 0.03);
          font-weight: 400;
          line-height: 22px;
        }

        .form-wrap {
          padding: 14px 20px;

          input,
          input:focus {
            padding-right: 0;
            padding-left: 0;
            border: none;
            box-shadow: none;
            border-bottom: 0.5px solid #e8e8eb;
          }

          :deep(.ant-form-item-label) {
            > label {
              color: rgba(25, 25, 48, 0.75);
            }
          }

          .bottom-input {
            border-bottom: 0;

            &:focus {
              border-bottom: 0;
            }
          }

          .ant-input {
            border-radius: 0 !important;
          }
        }

        .btn-wrap {
          display: flex;
          justify-content: center;
          margin-top: 60px;
        }
      }

      &.status-success {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 442px;
        flex-direction: column;

        .iconfont {
          font-size: 36px;
          color: #4fb35b;
        }

        p {
          margin-top: 4px;
          font-size: 16px;
          text-align: center;
          color: rgba(21, 23, 27, 0.95);
          font-weight: 400;
          line-height: 24px;

          span {
            color: #009cf8;
            cursor: pointer;
          }
        }
      }
    }
  }
</style>
